<!--
 * @description: 
 * @Date: 2023-08-17 15:12:09
 * @example: 
 * @params: 
-->
<!--
 * @description: 
 * @Date: 2023-08-17 15:12:09
 * @example: 
 * @params: 
-->
<template>
  <div v-if="options.src">
    <vue3VideoPlay  v-bind="options" />
  </div>
  
</template>
<script setup>


import { getVideoStream } from './server/index'
import { reactive, nextTick }  from 'vue'

const options = reactive({
  width: '800px', //播放器高度
  height: '450px', //播放器高度
  color: "#409eff", //主题色
  title: '', //视频名称
  src: '', //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: true, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false,  //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  type:"hls"
})

nextTick( async ()=>{
  options.src = await getVideoStream()
  console.log(options.src,111)
} )

</script>

<style scoped>
</style>